<template>
  <div class="mail">
    <div class="mail-header">
      <div v-if="notice.system">
        <el-tag size="large" type="success">系统邮件</el-tag>
      </div>
      <div v-if="notice.project">
        <el-tag size="large" type="success">项目邮件</el-tag>
        <el-tag size="large" type="warning">{{ notice.project.name }}</el-tag>
      </div>
      <div v-if="notice.department">
        <el-tag size="large" type="success">部门邮件</el-tag>
        <el-tag size="large" type="warning">
          {{ notice.department.name }}
        </el-tag>
      </div>
      <div class="mail-title">
        <strong>{{ notice.title }}</strong>
      </div>
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-icon>
            <More />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="openUpdateMailDialog">修改邮件</el-dropdown-item>
            <el-dropdown-item @click="openConfirmDeleteNoticeDialog">删除邮件</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="mail-main">
      <div class="mail-content">
        <div v-html="MailContent" class="mail-mdtxt"></div>
      </div>
    </div>
    <div class="mail-footer">
      <div>
        <span>发件人：</span>
        <span v-if="notice.system">{{ notice.system.sender.name }}(系统身份：{{ notice.system.sender.role.name }})</span>
        <span v-if="notice.department">{{ notice.department.sender.name }}({{ notice.department.sender.role.name
        }})</span>
        <span v-if="notice.project">{{ notice.project.sender.name }}({{ notice.project.sender.role.name }})</span>
      </div>
      <span class="time" style="margin-left: 10px;">{{ formatDate(notice.date_time) }}</span>
    </div>
    <div class="mail-recipients">
      <div>
        <span style="color: #999;font-size: 14px;">收件人：</span>
        <el-tag style="margin-left: 5px" v-for="item in notice.recipients" :key="item.id" type="primary">{{ item.name
        }}</el-tag>
      </div>
    </div>
  </div>
  <UpdateMail ref="update_mail" @update="updateMail" />
</template>

<script>
import MarkdownIt from 'markdown-it'
import { post } from '../../../utils/common/api';
export default {
  data() {
    return {
      id: this.$route.params.id,
      notice: {},
      mod: {
        title: '',
        content: '',
        recipients: [],
      }
    }
  },
  computed: {
    MailContent() {
      const md = new MarkdownIt()
      const result = md.render(String(this.notice.content))
      return result
    }
  },
  methods: {
    async getMailProfile() {
      this.notice = await post('/info/mail/sender/profile', {
        id: this.id
      })
    },

    formatDate(dateTime) {
      // Check if dateTime is defined before accessing its properties
      if (dateTime && dateTime.year && dateTime.month && dateTime.day && dateTime.hour && dateTime.minute && dateTime.second) {
        // Format the date and time as needed
        return `${dateTime.year}-${dateTime.month}-${dateTime.day} ${dateTime.hour}:${dateTime.minute}:${dateTime.second}`;
      } else {
        return 'Invalid Date';
      }
    },

    openConfirmDeleteNoticeDialog() {
      let that = this
      ElMessageBox.confirm(
        `将邮件(${this.notice.id})从已发出的邮件中移除？`,
        '警告',
        {
          confirmButtonText: '移除',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(function () {
        that.deleteNotice()
      })
    },

    async deleteNotice() {
      const res = await post('/info/mail/sender/delete', {
        id: this.id
      })
      ElNotification({
        title: '删除成功',
        message: `成功将邮件从已发出的邮件中移除`,
        type: 'success',
        position: 'bottom-right',
      })
      this.$router.back()
    },

    openUpdateMailDialog() {
      this.$refs.update_mail.setDetail(this.id, this.notice)
      this.$refs.update_mail.openDialog()
    },

    async updateMail() {
      await this.getMailProfile()
    }

  },
  mounted() {
    this.getMailProfile()
  },
}
</script>

<style scoped>
.mail-header {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #E0E0E0;
}

.mail-main .mail-title {
  padding: 10px;
}

.mail-main .mail-content {
  max-height: 510px;
  overflow-y: auto;
}

.mail-footer {
  height: 40px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mail-footer span {
  color: #999;
  font-size: 14px;
}

.time {
  color: #999;
  font-size: 13px;
  overflow: hidden;
}

.mail-mdtxt {
  border: 1px solid #e8e8e8;
  padding: 5px 10px;
  text-align: left;
  font-size: 15px;
}

.el-dropdown {
  cursor: pointer;
}

.mail-recipients {
  display: flex;
  padding: 5px;
}
</style>